<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div style="border: 1px">
      <van-swipe-cell>
        <van-card
          :desc="shops.descrip"
          :title="shops.name"
          class="goods-card"
          :thumb="shops.pic"
        />
      </van-swipe-cell>
    </div>

    <van-tree-select height="110vw" :items="items" @click-nav="change">
      <template #content>
        <van-card
          num="1"
          :price="i.price"
          :desc="i.description"
          :title="i.name"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          v-for="(i, index) in list1"
          :key="index"
        >
          <template #tags>
            <van-tag type="danger">销量500</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" @click="buy(i['id'], i['flavors'])"
              >购买</van-button
            >
          </template>
        </van-card>
      </template>
    </van-tree-select>

    <footers></footers>
    <div>
      <van-dialog
        v-model="show"
        title="口味选择"
        show-cancel-button
        style="width: 50%"
        @confirm="submit"
      >
        <van-radio-group
          v-model="redio[index]"
          v-for="(i, index) in flavorlist"
          :key="index"
        >
          <van-radio :value="j" :name="j" v-for="(j, ind) in i" :key="ind">
            {{ j }} </van-radio
          ><br />
        </van-radio-group>
        <van-button>提交</van-button>
      </van-dialog>

      <van-action-sheet v-model="isshow" title="标题">
        <div class="content">
          <ul>
            <li v-for="(i, index) in cartlist" :key="index">
              {{ i.name }} {{ i.price }}
              <van-button @click="jiajian(i.id, 2)"></van-button>
            </li>
          </ul>

          <div>总共{{ this.tcount }}件，总价{{ this.tmoney }}元</div>
        </div>
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
import footers from "@/components/footers";
export default {
  components: {
    footers: footers,
  },
  data() {
    return {
      active: 2,
      tcount: 0,
      tmoney: 0,
      shoper: [],
      show: false,
      buyid: 0,
      flavorlist: [],
      redio: [],
      type: 1,
      aaa: [],
      shops: [], // 商家信息
      items: [], // 所有分类
      list1: [], // 所属分类的菜品
      isshow: false,
      cartlist: [],
    };
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    change(index) {
      this.getGoods(this.items[index]["id"]);
    },
    getShoper() {
      this.axios
        .get("/index/getshops")
        .then((resp) => {
          this.shops = resp.data.shops;
          console.log("商家", resp);
        })
        .catch((err) => {
          console.log("商家", err);
        });
    },
    getCate() {
      this.axios
        .get("/index/getcates")
        .then((resp) => {
          console.log("分类", resp);
          this.items = resp.data.catelist;
          this.getGoods(this.items[0]["id"]);
        })
        .catch((err) => {
          console.log("分类失败", err);
        });
    },
    getGoods(index) {
      this.axios
        .get("/index/getGoodsBycateid?cateid=" + index)
        .then((resp) => {
          this.list1 = resp.data.goods;
          console.log("菜品", resp);
        })
        .catch((err) => {
          console.log("菜品失败", err);
        });
    },
    buy(id, flavor) {
      this.show = true;
      this.buyid = id;
      this.redio = [];
      if (flavor) {
        this.show = true;
        console.log(flavor);
        this.flavorlist = flavor;
        //选择口味
        console.log(this.flavorlist);
      } else {
        //调用加入购物车接口
        this.addcart();
      }
    },
    submit() {
      this.addcart();
    },
    addcart() {
      var flavors = JSON.stringify(this.redio);
      this.axios
        .get(
          "/index/addcate?userid=211&gid=" +
            this.buyid +
            "&count=1&type=" +
            this.type +
            "&flavors=" +
            flavors
        )
        .then((res) => {
          console.log("添加", res);
          this.getcartlist();
          this.isshow = true
        });
    },
    getcartlist() {
      this.axios
        .get("/index/addcart?userid=211")
        .then((resp) => {
          console.log('aaa',resp)
          this.cartlist = resp.data.clist;
          this.tmoney = resp.data.tmoney;
          this.tcount = resp.data.tcount;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    jiajian(id, type) {
      this.axios
        .get("/index/jiajian?userid=300&gid=" + id + "&count=1&type=" + type)
        .then((resp) => {
          if (resp.data.code == 200) {
            alert("操作成功");
            this.getcartlist();
          } else {
            alert(resp.data.mes);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getShoper();
    this.getCate();
  },
};
</script>

<style>
.van-nav-bar__content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 60px;
}

.goods-card {
  margin: 0;
  background-color: aliceblue;
}

.delete-button {
  height: 100%;
}
</style>